// ------------------获取学生信息列表，并渲染数据----------------------
async function renderStudent() {
  const { data: res } = await axios.get('/students')
  // console.log(res)
  let arr = res.data.map(item => {
    return `
                <tr>
                  <td>${item.name}</td>
                  <td>${item.age}</td>
                  <td>${item.gender === 0 ? '男' : '女'}</td>
                  <td>${item.group}</td>
                  <td>${item.hope_salary}</td>
                  <td>${item.salary}</td>
                  <td>${item.province} ${item.city} ${item.area}</td>
                <td>
                  <a href="javascript:;" class="text-success mr-3"><i data-id="${
                    item.id
                  }" class="bi bi-pen"></i></a>
                  <a href="javascript:;" class="text-danger"><i data-id="${
                    item.id
                  }" class="bi bi-trash"></i></a>
                </td>
              </tr> 
  `
  })
  document.querySelector('tbody').innerHTML = arr.join('')
}
renderStudent()

// 添加操作，需要提前准备，比如模态框的用法、省市县联动效果
// bootstrap模态框使用方法，两个步骤: 1. 实例化  2. 调用方法显示或隐藏
// let addModal = new bootstrap.Modal(模态框盒子)
let addModal = new bootstrap.Modal(document.querySelector('#modal'))

// addModal.show() // 让模态框显示
// addModal.hide() // 让模态框隐藏

// 点击 + 按钮的时候，让模态框显示
document.querySelector('#openModal').addEventListener('click', function () {
  // 修改模态框的标题
  document.querySelector('#modal h5').innerHTML = '添加学员'
  // 重置表单
  document.querySelector('#form').reset()
  addModal.show()
})
// 获取省市县，渲染到下拉框中
// 首先获取到所需要的元素
let province = document.querySelector('[name=province]')
let city = document.querySelector('[name=city]')
let area = document.querySelector('[name=area]')
// 获取省
axios.get('/api/province').then(({ data: res }) => {
  // console.log(res)
  let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
  province.innerHTML = `<option value="">--省份--</option>` + arr.join('')
})

// 当省份发生改变的时候，获取市
province.addEventListener('change', async function () {
  // 省切换的时候要清空县
  area.innerHTML = `<option value="">--地区--</option>`
  // 判断省份如果为空，城市就为空
  if (province.value === '') {
    return (city.innerHTML = `<option value="">--城市--</option>`)
  }
  const { data: res } = await axios.get('/api/city', { params: { pname: province.value } })
  //  console.log(res)
  let arr1 = res.data.map(item => `<option value="${item}">${item}</option>`)
  city.innerHTML = `<option value="">--城市--</option>` + arr1.join('')
})

// 当市发生改变的时候，获取县
city.addEventListener('change', async function () {
  // 判断如果没有选中市，重置县
  if (city.value === '') {
    return (area.innerHTML = `<option value="">--地区--</option>`)
  }
  const { data: res } = await axios.get('/api/area', {
    params: { pname: province.value, cname: city.value }
  })
  let arr2 = res.data.map(item => `<option value="${item}">${item}</option>`)
  area.innerHTML = `<option value="">--地区--</option>` + arr2.join('')
})

// 给确认按钮添加点击事件
document.querySelector('#submit').addEventListener('click', async function (e) {
  e.preventDefault()
  // 获取所有表单项
  let data = val(document.querySelector('#form'))
  // console.log(data)
  // 根据接口要求需要转换成数字
  data.age = +data.age
  data.gender = +data.gender
  data.group = +data.group
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
   // 判断，是添加还是修改 操作
   let title = document.querySelector('#modal h5').innerHTML
   if (title === '添加学员') {
     // ajax提交
     try {
       const { data: res } = await axios.post('/students', data)
       // console.log(res)
       message.success(res.message) // 使用插件提示
       renderStudent() // 重新获取页面数据，重新渲染
       addModal.hide() // 关闭弹层
     } catch (e) {
       message.error('添加失败')
     }
   } else if (title === '修改学员') {
     try {
       let id = document.querySelector('#modal h5').dataset.id
       const { data: res } = await axios.put(`/students/${id}`, data)
       message.success(res.message) // 使用插件提示
       renderStudent() // 重新获取页面数据，重新渲染
       addModal.hide() // 关闭弹层
     } catch (e) {
       message.error('修改失败')
     }
   }
})

// ---------------------删除学生信息/修改学生信息-------------------------
// 用事件委托的方式
document.querySelector('tbody').addEventListener('click', async function (e) {
  // 判断是否点了删除
  if (e.target.classList.contains('bi-trash')) {
    let id = e.target.dataset.id
    // console.log('点击了删除' ,id)
    try {
      const { data: res } = await axios.delete(`/students/${id}`)
      message.success('删除成功')
      // 重新渲染页面
      renderStudent()
    } catch (e) {
      message.error('删除失败')
    }
  }
  // 判断是否点击了修改
  if (e.target.classList.contains('bi-pen')) {
    let id = e.target.dataset.id
    // console.log('点击了修改')
    // 修改模态框的标题
    document.querySelector('#modal h5').innerHTML = '修改学员'
    document.querySelector('#modal h5').setAttribute('data-id', id)
    // 显示模态框
    addModal.show()
    const { data: res } = await axios.get(`/students/${id}`)
    // 在数据回填之前，应该把市、县都取出，渲染到第2、3个下拉框中
    let p1 = axios.get('/api/city', { params: { pname: res.data.province } })
    let p2 = axios.get('/api/area', { params: { pname: res.data.province, cname: res.data.city } })
    const result = await Promise.all([p1, p2])
    let arr4 = result[0].data.data.map(item => `<option value="${item}">${item}</option>`)
    document.querySelector('[name=city]').innerHTML =
      `<option value="">--城市--</option>` + arr4.join('')
    let arr5 = result[1].data.data.map(item => `<option value="${item}">${item}</option>`)
    document.querySelector('[name=area]').innerHTML =
      `<option value="">--地区--</option>` + arr5.join('')
    // 获取所有表单
    val(document.querySelector('#form'), res.data)

    //  console.log(res);
  }
})
